<template>
	<view class='header-container'>
		<!-- <view :style="{height: setting.statusBarHeight+'px'}"></view> -->
		<view class='header-wrapper' :style="{padding: setting.statusBarHeight + 'px 0px 0px 0px', height: setting.topMenuHeight+'px'}">
			<view class='left'>
				<uni-icons type='back' :size="iconsize" :color="setting.corg" v-if='icon=="back"' @click="goBack"></uni-icons>
				<image src="/static/image/ico-acc.png" class='i3' v-if='icon=="acc"'></image>
			</view>
			<view class='middle'><slot></slot></view>
			<view class='right'></view>
		</view>
	</view>
	<view class='header-space' :style="{height: setting.topMenuWithSpaceHeight+'px'}"></view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import https from '@/lib/https.js';
	
	export default {
		name:"menuheader",
		props: {
			icon: {
				type: String,
				default: 'back',
				required: true,
				validator: function(value) {
					return true
				}
			},
			
			iconsize: {
				type: Number,
				default: 18,
				required: true,
				validator: function(value) {
					console.log(value);
					return true
				}
			}
		},
		data() {
			return {
				setting:{menuBottom:0, statusBarHeight:20}
			};
		},
		
		methods:{
			goBack(){
				uni.navigateBack({
					delta: 1
				});
			}
		},
		
		mounted(){
			console.log('this.iconsize = ' + this.iconsize)
			gui.init(this); 
		}
		
	}
</script>

<style>
	.header-container{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: #fff;
		z-inedx: 999;
	}
	
	.header-wrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 4px 0px;
	}
	
	.header-wrapper .left{
		width: calc( 30% - 10px );
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		padding-left: 10px;
		height: 100%;
	}
	
	.header-wrapper .right{
		width: 30%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.header-wrapper .middle{
		width: 40%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
</style>